import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min"
import JcdjcHandle from "../../../../../../utils/apis/JcdjcHandle";
import { Card, Form, Input, Select, Button } from "antd";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";

export default function JcdjcEdit() {
    const id = useParams()?.id;
    const [jcdjcIdDatas, setJcdjcIdDatas] = useState();
    const [jcdjcEditDynamicForms, setJcdjcEditDynamicForms] = useState();
    const [form] = Form.useForm();
    const history = useHistory();
    useEffect(() => {
        JcdjcHandle.jcdjcEditDynamicApi().then(datas => {
            setJcdjcEditDynamicForms(datas)
        })
    }, [])
    useEffect(() => {
        JcdjcHandle.JcdjcIdDatasApi(id).then(resp => {
            setJcdjcIdDatas(resp.data)
            let xqDatas = JSON.parse(resp.data.xq)
            form.setFieldsValue({
                ...resp.data,
                xqJson: {
                    ...xqDatas
                }

            })
        })
    }, [id, form])

    const onFinish = (values) => {
        for (const key in jcdjcIdDatas) {
          if (values.hasOwnProperty(key)) {
            jcdjcIdDatas[key] = values[key]
          }
        }
        jcdjcIdDatas.xq = JSON.stringify(values.xqJson)
        // console.log(idDatas.xq)
    
        FetchHelper.putJson(`/admin-api/ybyj/jcd`, jcdjcIdDatas).then(resp => { alert("修改成功") }).catch(err => { alert("修改失败") })
      }
    const quxiaoHandle = () => {
        history.push(`/manager/jcdjc`)
    }
    return <div className="layout-h100 fill" style={{
        overflow: "scroll"
    }}>
        <Card className="layout-h" style={{
            height: "1500px"
        }}>
            <header style={{
                fontSize: "20px",
                fontWeight: "bold"
            }}>监测点基础编辑</header><hr />
            <Form method="post"
                onFinish={onFinish}
                form={form}
                style={{
                    flex: "flex",
                    flexWrap: "wrap",
                    height: "1000px"
                }}>


                <div className="InputForm">
                    {jcdjcIdDatas !== undefined && jcdjcEditDynamicForms !== undefined && jcdjcEditDynamicForms.map((formItem) => {
                        let node;
                        switch (formItem.type) {
                            case 'select':
                                node = <Select></Select>;
                                break;
                            case 'input':
                            default:
                                node = <Input style={{
                                    width: "90%"
                                }}></Input>

                        }
                        return <div style={{
                            flexBasis: "33%",
                            marginBottom: "10px"
                        }}>
                            <Form.Item
                                label={formItem.alias}
                                name={formItem.name}
                            // rules={[
                            //     {
                            //       required: true,

                            //     }
                            //   ]}
                            >
                                {node}
                            </Form.Item>
                        </div>
                    })}
                </div>
                <div className="InputForm">
                    <header style={{
                        fontSize: 20,
                        fontWeight: "bold",

                    }}>详情编辑:</header>
                    <div className="InputForm" >
                        {jcdjcIdDatas !== undefined && jcdjcEditDynamicForms !== undefined && jcdjcEditDynamicForms.map((formItem) => {
                            let node;
                            switch (formItem.type) {
                                case 'select':
                                    node = <Select></Select>;
                                    break;
                                case 'input':
                                default:
                                    node = <Input style={{
                                        width: "90%"
                                    }}
                                        onChange={(e) => {

                                        }}

                                    />
                            }

                            return <div style={{
                                flexBasis: "33%",
                                marginBottom: "10px"
                            }}>
                                <Form.Item
                                    label={formItem.alias}
                                    name={['xqJson', formItem.name]}
                                // rules={[
                                //   {
                                //     required: true,

                                //   }
                                // ]}

                                >
                                    {node}
                                </Form.Item></div>

                        })}

                    </div>
                </div>
                <div className="layout-h">
                    <Button className="btn1" type="primary"
                        htmlType="submit"
                    >保存</Button>

                    <Button onClick={quxiaoHandle} className="btn2">返回</Button>
                </div>
            </Form>

        </Card>
    </div>
}